<template>
    <el-table border stripe :data="skuObj.records" style="margin: 10px 0px">
      <el-table-column label="序号" type="index" align="center" width="80">
      </el-table-column>
      <el-table-column label="名称" prop="skuName"> </el-table-column>
      <el-table-column label="描述" prop="skuDesc"> </el-table-column>
      <el-table-column label="默认图片">
        <template #="{ row, $index }">
          <img
            v-if="row.skuDefaultImg"
            :src="row.skuDefaultImg"
            alt=""
            style="width: 100px; height: 100px"
          />
          <img
            v-else
            src="./1.png"
            alt=""
            style="width: 100px; height: 100px; border-radius: 50%"
          />
        </template>
      </el-table-column>
      <el-table-column label="重量(千克)" prop="weight"> </el-table-column>
      <el-table-column label="价格(元)" prop="price"> </el-table-column>
      <el-table-column label="操作" width="250">
        <template #="{ row, $index }">
          <el-button
            :type="row.isSale == 0 ? 'success' : 'info'"
            :icon="row.isSale == 0 ? Top : Bottom"
            size="small"
            @click="changeSale(row)"
          ></el-button>
          <el-button
            type="primary"
            size="small"
            :icon="Edit"
            @click="ElMessage({ type: 'warning', message: '开发中...' })"
          ></el-button>
          <el-button
            type="info"
            size="small"
            :icon="InfoFilled"
            @click="showSkuInfo(row)"
          ></el-button>
          <el-button type="danger" size="small" :icon="Delete"></el-button>
        </template>
      </el-table-column>
    </el-table>
  
    <el-pagination
      @current-change="getSkuList"
      @size-change="sizeHandler"
      v-model:current-page="currentPage"
      v-model:page-size="pageSize"
      :page-sizes="[10, 20, 30]"
      layout="prev, pager, next, jumper,->,sizes,total"
      :total="skuObj.total"
      background
      :pager-count="7"
    >
    </el-pagination>
  
    <!-- 抽屉 
      v-model:控制抽屉显示与隐藏
    -->
    <el-drawer v-model="drawer">
    <el-row :gutter="10">
      <el-col :span="6" style="text-align: right">名称:</el-col>
      <el-col :span="18">{{skuInfo.skuName}}</el-col>
    </el-row>
    <el-row :gutter="10">
      <el-col :span="6" style="text-align: right">描述:</el-col>
      <el-col :span="18">{{skuInfo.skuDesc}}</el-col>
    </el-row>
    <el-row :gutter="10">
      <el-col :span="6" style="text-align: right; line-height: 22px">价格:</el-col>
      <el-col :span="18">{{skuInfo.price}}</el-col>
    </el-row>
    <el-row :gutter="10">
      <el-col :span="6" style="text-align: right; line-height: 42px">平台属性:</el-col>
      <el-col :span="18" style="line-height: 30px">
        <el-tag
          type="success"
          v-for="item in skuInfo.skuAttrValueList"
          :key="item.id"
          style="margin-left: 3px"
          >{{ item.valueName }}</el-tag
        >
      </el-col>
    </el-row>
    <el-row :gutter="10">
      <el-col :span="6" style="text-align: right; line-height: 42px"
        >销售属性:</el-col
      >
      <el-col :span="18" style="line-height: 30px">
        <el-tag
          type="success"
          v-for="item in skuInfo.skuSaleAttrValueList"
          :key="item.id"
          style="margin-left: 3px"
          >{{ item.saleAttrValueName}}</el-tag
        >
      </el-col>
    </el-row>
    <!--轮播图的底盘-->
    <el-row>
      <el-col>商品图片:</el-col>
    </el-row>
    <el-row>
      <el-col>
        <!-- 轮播图 -->
        <el-carousel indicator-position="outside" style="height: 400px">
          <el-carousel-item v-for="item in skuInfo.skuImageList" :key="item">
               <img :src="item.imgUrl" alt="" style="width:100%;height:300px">
          </el-carousel-item>
        </el-carousel>
      </el-col>
    </el-row>
  </el-drawer>
  </template>
  
  <script setup lang="ts">
  import { ElMessage } from "element-plus";
  //引入组合式API
  import { ref, onMounted, reactive } from "vue";
  //引入请求函数
  import { reqSkuList ,reqSkuInfo } from "../../../api/product/sku/sku";
  import {
    Check,
    Delete,
    Edit,
    Message,
    Search,
    Star,
    Plus,
    UploadFilled,
    Top,
    Bottom,
    InfoFilled,
  } from "@element-plus/icons-vue";
  //当前第几页
  let currentPage = ref<number>(1);
  //当前数据条数
  let pageSize = ref<number>(10);
  
  //存储服务器返回数据
  let skuObj = reactive({});
  
  //控制抽屉的显示与隐藏
  let drawer = ref<boolean>(false);
    //存储SKU详情的数据
let skuInfo = ref<any>({});
  
  //组件挂载完毕获取一次SKU列表
  onMounted(() => {
    getSkuList();
  });
  //封装获取SKU列表接口函数
  const getSkuList = async (pager: number = 1) => {
    //修改参数
    currentPage.value = pager;
    let result = await reqSkuList(currentPage.value, pageSize.value);
    //存储服务器返回的数据
    Object.assign(skuObj, result);
  };
  
  //上架与下架按钮的回调
  const changeSale = (row) => {
    //切换上架与下架按钮形态
    row.isSale == 0 ? (row.isSale = 1) : (row.isSale = 0);
    //上架与下架请求:携带SKUid,更新完上架与下架之后从新获取SKU最新列表数据
  };
  
  const sizeHandler = () => {
    getSkuList();
  };

  //抽屉查看详情按钮的回调
const showSkuInfo = async (row) => {
  //抽屉需要出来
  drawer.value  = true;
  //通过SKU的ID获取SKU详情
  let result = await reqSkuInfo(row.id);
  //存储服务器数据
  skuInfo.value = result;
};
  </script>
  
  <style scoped>
  /**深度选择器:能干什么  深度选择器有哪些  什么情况下使用**/
  /**  >>>  /deep/ ::v-deep   回来咱们会花1一个小时讲解它***/
  >>>.el-carousel__button{
      width:10px;
      height: 10px;
      background:yellowgreen;
      border-radius: 50%;
   }
  </style>